import { useState } from 'react';
import Markdown from '@/components/Markdown';
import { Input } from 'antd';
const { TextArea } = Input;

export default () => {
  const [string, setString] = useState<string>('');
  return (
    <div style={{ display: 'grid', rowGap: '30px' }}>
      <div>
        <div style={{ marginBlock: '10px 5px' }}>编辑</div>
        <div>
          <TextArea onChange={e => setString(e.target.value)} />
        </div>
      </div>

      <div>
        <div style={{ marginBlock: '10px 5px' }}>预览</div>
        <Markdown
          children={string}
          style={{
            background: '#fff',
            width: '100%',
            minHeight: '200px',
            borderRadius: '5px'
          }}
        />
      </div>
    </div>
  );
};
